
<template>
  <el-menu default-active="1" 
    collapse-transition router 
    @select="handleOpen"
    :default-active="$route.path" 
    unique-opened 
    class="el-menu-vertical" background-color="#1C1E22" text-color="#fff" active-text-color="#fff">
    <div class="logobox">
      <router-link to="/home">
        <img class="logoimg" src="../assets/img/logob.png" alt="" />
        <span>AUSD</span>
      </router-link>
    </div>

      <el-submenu index="1">
        <template slot="title">
        <img src="../assets/img/icon1.png" alt="">
          <span>Minting</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/minting">
            <img src="../assets/img/icon2.png" alt="">
            <span>Minting</span>
          </el-menu-item>

          <el-menu-item index="/dashboard">
            <img src="../assets/img/icon3.png" alt="">
            <span>Dashboard</span>
          </el-menu-item>
          
          
        </el-menu-item-group>
       
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
        <img src="../assets/img/icon2.png" alt="">
          <span>Ecosystem</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/swap">
            <img src="../assets/img/icon3.png" alt="">
            <span>Swap</span>
          </el-menu-item>
          
          <!-- <el-menu-item index="/Ecosystem">
            <img src="../assets/img/icon1.png" alt="">
            <span>Ecosystem</span>
          </el-menu-item> -->

          <el-menu-item index="">
            <img src="../assets/img/icon1.png" alt="">
            <span>Corporate Bonds</span>
          </el-menu-item>

          <el-menu-item index="">
            <a href="https://bemagicart.com/home" target="_blank">
              <img src="../assets/img/icon2.png" alt="">
              <span>Beautiful Countryside</span>
            </a>
          </el-menu-item>
        </el-menu-item-group>
       
      </el-submenu>

      <el-menu-item index="/transparency">
        <img src="../assets/img/icon3.png" alt="">
        <span slot="title">Transparency</span>
      </el-menu-item>

      <!-- <el-menu-item index="/minting">
        <img src="../assets/img/icon1.png" alt="">
        <span>Minting</span>
      </el-menu-item>
      <el-menu-item index="/swap">
        <img src="../assets/img/icon2.png" alt="">
        <span>Swap</span>
      </el-menu-item>
      <el-menu-item index="/ecosystem">
        <img src="../assets/img/icon2.png" alt="">
        <span slot="title">Ecosystem</span>
      </el-menu-item>
      <el-menu-item index="/transparency">
        <img src="../assets/img/icon3.png" alt="">
        <span slot="title">Transparency</span>
      </el-menu-item> -->

      
      <div class="logout" @click="exit()">
        <img src="../assets/img/logout.png" alt="">  Logout
      </div>
  </el-menu>
</template>
<script>

export default {
  name: 'leftnav',
  data() {
    return {
      name:''
    }
  },
  created() {
  },
  methods: {
    // 退出登录
    exit() {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit('logout', 'false')
            this.$router.push({ path: '/login' })
            this.$message({
              type: 'success',
              message: '已退出登录!'
            })
          }, 1000)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleOpen(key, keyPath) {
      console.log(key);
      this.name == key
    }
  }
}
</script>
<style>
a{
  text-decoration: none;
}
.logobox {
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 44px 0px 100px;
}
.logobox a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration:initial;
}
.logoimg {
  height: 48px;
  padding-right: 10px;
}
.logobox span{color: #fff;text-transform: none;font-size: 24px;font-weight: bold;}

.el-menu-vertical .el-menu-item{
  background:transparent;
  border-left: 4px solid transparent;
  transition: 0.5s;
  font-size: 15px;
}

.el-menu-vertical .el-menu-item:hover,.el-menu-vertical .is-active{
  background: #2A2B2D !important;
  border-left: 4px solid #fff;
}
.el-menu-vertical .el-menu-item:hover,.el-menu-vertical .is-active span{
  color: #fff !important;
}
.el-menu-vertical .el-menu-item:hover,.el-menu-vertical .is-active.is-opened{
  border-left: 4px solid rgba(0, 0, 0, 0);
  border-left: 4px solid #fff;
}
.el-submenu{
  border: 0 !important;
}
.el-submenu:hover{
  background: #2A2B2D !important;
}

.el-menu-vertical li img{width: 28px;padding: 0 24px 0 40px;}
.el-menu-vertical li.el-menu-item-group span{color: rgb(164, 164, 164) !important;}
.el-menu-vertical li.el-menu-item-group img{width: 20px;padding: 0 10px 0 40px;}

.el-menu-vertical .el-menu-item,.el-submenu{min-height: 70px !important;line-height: 70px;}
.el-submenu__title{
  height: 70px !important;
  line-height: 70px;
}
.el-submenu__title:hover{
  background: #2A2B2D !important;
}
.is-active .el-submenu__title{
  background-color: rgb(35, 35, 35) !important;
}
.el-menu-item-group__title{padding:0}

.logout{
  position: fixed;
  bottom: 50px;
  width: 300px;
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.logout img{    width: 28px;
    padding: 0 24px 0 60px;}
</style>